<template>
	<view class="container">
		<cu-bar2 bgColor="bg-orange" :isBack="false"><block slot="content" class="page-name text-white">分类</block></cu-bar2>
		<view class="contents-tabar padding-top-sm">
			<view class="shop_classify bg-white">
				<view class="VerticalBox padding-top">
					<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="{height:'calc(100vh - '+(CustomBar+StatusBar)+'px);'}">
						<view class="cu-item text-size-28 text-bold-light" :class="index == tabCur ? 'text-orange cur' : ''" v-for="(item, index) in list" :key="index" @tap="TabSelect" :data-id="index">
							{{ item.name }}
						</view>  
					</scroll-view>
					<scroll-view
						class="VerticalMain"
						scroll-y
						scroll-with-animation
						:style="{height:'calc(100vh - '+(CustomBar+StatusBar)+'px);'}"
						:scroll-into-view="'main-' + mainCur"
						@scroll="VerticalMain">
						<view v-for="(item, index) in list" :key="index" :id="'main-' + index">
							<view class="cu-bar solid-bottom bg-white flex justify-center">
								<view class="action">————— {{ item.name }} —————</view>
							</view>
							<view class="cu-list grid no-border col-3">
								<view class="cu-item" v-for="(child, cur) in list[tabCur].list" :key="cur" @click="onClickClassfly" :data-index="cur">
									<view class="cu-avatar xl radius margin-left" :style="'background-image: url(' + child.img + ')'"></view>
									<text>{{ child.name }}</text>
								</view>
							</view>
						</view>
						
					</scroll-view>
					
				</view>
			</view>
		</view>
		<tabbar isBottom="true" :selectIndex="1" @onswitch="onSwitch"></tabbar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['hasLogin', 'userinfo']),
	components: {
	},
	data() {
		return {
			pageNo: 1,
			pageSize: 20,
			loadMoreText: '到底咯',
			total: 0,
			shop: [],
			winheight: this.ScreenHeight,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			styleslist: [
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
					name: '卫衣'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
					name: '棉衣'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
					name: '热销'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg',
					name: '户外运动'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
					name: '大衣'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg',
					name: '毛衣'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg',
					name: '修身'
				},
				{
					img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
					name: '圆领外套'
				}
			],
			list: [],
			tabCur: 0,
			mainCur: 0,
			verticalNavTop: 0,
			load: true,
		};
	},
	onLoad: function(prop) {
		let cases = new Array('女装', '大家电', '电脑办公', '食品酒水', '珠宝首饰', '家居家纺', '居家生活', '运动户外', '家装建材');
		let list = [{}];
		for (let i = 0; i < cases.length; i++) {
			list[i] = {
				id: i,
				name: cases[i],
				list: this.styleslist
			};
		}
		this.list = list;
	},
	onShow() {
		this.onRefreshPage();
		//this.onInit(0);
	}, //下拉刷新
	onPullDownRefresh: function() {
		var that = this;
		this.loadMoreText = '';
		this.pageNo = 1;
		setTimeout(function() {
			//that.onInit(1);
		}, 500);
	}, //上拉加载更多
	onReachBottom() {
		this.pageNo++;
		if (this.pageNo > this.total) {
			this.loadMoreText = '没有更多数据了!';
			return;
		}
		setTimeout(() => {
			this.onInit();
		}, 500);
	}, //分享页面
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		let params = 'token=' + this.userinfo.uid;
		return this.util.getSharePage(params);
	},
	methods: {
		...mapMutations(['setinviter']),
		onRefreshPage: function() {
			this.pageNo = 1;
			this.tabCur = 0;
			this.mainCur = 0;
			this.verticalNavTop = 0;
		},
		onInit: function(type) {
			let that = this;
			this.$controller.onHome(this.pageNo, this.$store.state, type, function(data, error, msg) {
				console.log(data);
				if (error == 0) {
					that.total = data.total;
					if (that.pageNo == 1) {
						that.shop = data.shop;
					} else {
						that.shop = that.shop.concat(data.shop);
					}
				}
			});
		},
		toPage: function(e) {
			let url = e.currentTarget.dataset.url;
			if (!url) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		onClickClassfly: function(e) {
			this.util.showDialog("你点击了分类",'知道了',function(){});
		},
		onSwitch(e) {
			switch (parseInt(e)) {
				case 0:
					uni.redirectTo({
						url: '../home/home'
					});
					break;

				case 2:
					uni.redirectTo({
						url: '../shopcar/shopcar'
					});
					break;
				case 3:
					uni.redirectTo({
						url: '../users/users'
					});
					break;
			}
		},
		TabSelect(e) {
			//this.onRefreshPage();
			this.tabCur = e.currentTarget.dataset.id;
			this.mainCur = e.currentTarget.dataset.id;
			this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
		},
		VerticalMain(e) {
			// #ifdef MP-ALIPAY
			return false; //支付宝小程序暂时不支持双向联动
			// #endif
			let that = this;
			let tabHeight = 0;
			if (this.load) {
				for (let i = 0; i < this.list.length; i++) {
					let view = uni.createSelectorQuery().select('#main-' + this.list[i].id);
					view.fields(
						{
							size: true
						},
						data => {
							if (data != null) {
								this.list[i].top = tabHeight;
								tabHeight = tabHeight + data.height;
								this.list[i].bottom = tabHeight;
							}
						}
					).exec();
				}
				this.load = false;
			}
			let scrollTop = e.detail.scrollTop + 10;
			for (let i = 0; i < this.list.length; i++) {
				if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
					this.verticalNavTop = (this.list[i].id - 1) * 50;
					this.tabCur = this.list[i].id;
					console.log(scrollTop);
					return false;
				}
			}
		}
	}
};
</script>

<style scoped>

.VerticalNav.nav {
	width: 200upx;
	white-space: initial;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color:#f1f1f1 ;
	margin: 0;
	border: none;
	height: 100upx;
	line-height: 100upx;
	position: relative;
	align-items: center;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #ffffff;
}

.VerticalNav.nav .cu-item.cur::after {
	content: '';
	width: 8upx;
	height: 100upx;
	border-radius: 10upx 0 0 10upx;
	position: absolute;
	background-color: currentColor;
	top: 0;
	right: 0upx;
	bottom: 0;
	margin: auto;
}

.VerticalBox {
	display: flex;
}
.VerticalMain {
	background-color: #f1f1f1;
	flex: 1;
}
</style>
